<template>
	<view class="contet" :style="{ height: windowHeight + 'px' }">
		<view class="btm-content" :style="{height:nowHeight+'px'}" :animation="showpic">
			<view class="zhankai" @touchstart="setTouch" @touchmove="getMove" @touchend="getTouch">
				<view class="tishi">{{zkstr}}</view>
			</view>
		</view>
	</view>
</template> 

<script>
	var animation = uni.createAnimation({
		timingFunction: "linear",
	});
	var pageY = 0;
	export default{
		data(){
			return{
				windowHeight: 0, //屏幕高度
				nowHeight: 68,
				zkstr: '上拉展开',
				windowHeight:0,
				showpic: '',
			}
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
				complete(e) {
					that.windowHeight = e.windowHeight;
				}
			})
		},
		methods:{
			setTouch(e) { //手指按下
				pageY = e.changedTouches[0].pageY; //保存点下的位置
			},
			getMove(e) { //手指拖动
				var moveY = e.changedTouches[0].pageY - pageY; //计算移动位置和第一次点下的位置
				var nowMove = e.changedTouches[0].pageY;
				if (moveY > 0) { //判断向上滑动还是向下滑动
					this.updown = false;
				} else {
					this.updown = true;
				}
				animation.top(nowMove).height(this.windowHeight - nowMove).step({
					duration: 0,
					delay: 0
				}); //描述动画
				this.showpic = animation.export(); //导出动画
			},
			getTouch(e) { //手指放开
				var moveY = e.changedTouches[0].pageY;
				var height = this.windowHeight / 2;
				if (moveY < height) {
					if (this.updown) {
						this.zkstr = '下拉收起'
						animation.top(0).height(this.windowHeight).step({
							duration: 100,
							delay: 0
						}); //描述动画
					} else {
						animation.top(height).height(height).step({
							duration: 100,
							delay: 0
						}); //描述动画
					}
					this.showpic = animation.export();
					return
				}
				if (moveY > height) {
					if (this.updown) {
						animation.top(height).height(height).step({
							duration: 100,
							delay: 0
						})
					} else {
						this.zkstr = '上拉展开'
						animation.top(this.windowHeight - 68).height(68).step({
							duration: 100,
							delay: 0
						}); //描述动画
					}
					this.showpic = animation.export();
				}
			},
		}
	}
</script>

<style>
	.btm-content {
		background: #ccc;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		border: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
	}
	.zhankai{
		width: 100%;
		height: 68px;
		text-align: center;
		color: #42556c;
	}
	.tishi{
		margin: 5px 0;
		font-size: 8px;
		line-height: 8px;
	}
	.contet{
		height: 800px;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
</style>
